<template>
  <div id="compliance_charts" style="width: 100%;height: 100%;">
    <div class="nodata" v-if="!data || !data.length">暂无数据</div>
  </div>
</template>
<script>
export default {
  mounted() {
    this._initCharts()
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    title: {
      type: String,
      default: ''
    }
  },
  watch: {
    data(newv) {
      this._initCharts()
    }
  },
  methods: {
    _initCharts () {
      if(!this.data || !this.data.length) {
        return
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("compliance_charts"))
      let viewData = 100
      if(this.data.length <= 5) {
        viewData = 100
      }
      let labels = []
      let values = []
      this.data.forEach(item => {
        labels.push(item.name)
        if(!item.value) {
          values.push(item.count)
        } else {
          values.push(item.value)
        }
        
      })
      var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        title: {
          text: this.title,
          textStyle: {
            color: '#fff',
            fontSize: this.$options.filters.fontSize(0.16)
          }
        },
        grid: {
            left: '2%',
            right: '4%',
            bottom: '5%',
            top: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: labels,
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            axisLabel: {
              textStyle: {
                  color: '#fff',
                  fontSize: this.$options.filters.fontSize(0.14)
              },
              formatter:function(value) {
                var ret = "";//拼接加\n返回的类目项  
                var maxLength = 5;//每项显示文字个数  
                var valLength = value.length;//X轴类目项的文字个数  
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                if (rowN > 1)//如果类目项的文字大于3,  
                {  
                    for (var i = 0; i < rowN; i++) {  
                        var temp = "";//每次截取的字符串  
                        var start = i * maxLength;//开始截取的位置  
                        var end = start + maxLength;//结束截取的位置  
                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
                        temp = value.substring(start, end) + "\n";  
                        ret += temp; //凭借最终的字符串  
                    }  
                    return ret;  
                }
                else {  
                    return value;  
                }  
              }
            },
            axisTick: {
                show: false
            }
        },

        yAxis: {
            type: 'value',
            
            axisLine: {
                show: false,
                lineStyle: {
                    color: '#242424'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',
                    fontSize: this.$options.filters.fontSize(0.16)
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
        },
        "dataZoom": [{
            "show": false,
            "height": this.$options.filters.fontSize(0.06),
            "xAxisIndex": [
                0
            ],
            bottom: '9%',
            "start": 0,
            "end": viewData,
            backgroundColor: '#303030',
            fillerColor: '#828282',
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
                color: "transparent",
            },
            textStyle: {
                color: "transparent"
            },
            borderColor: "transparent"
        }, {
            "type": "inside",
            "show": false,
            "height": this.$options.filters.fontSize(0.15),
            "start": 1,
            "end": viewData
        }],
        series: [{
                
                type: 'bar',
                barWidth: '15%',
                itemStyle: {
                    normal: {
                        color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#888'
                        }, {
                            offset: 1,
                            color: '#222'
                        }]),
                        barBorderRadius: 0,
                    },

                },
                label: {
                    show: false,
                    position: ['-10', '-12'],
                    color: '#8E8E38',
                    fontSize: this.$options.filters.fontSize(0.16),
                },
                data: values,
            },

        ]
    };



      // 绘制图表
      myChart.setOption(option)
      
      
    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
#compliance_charts {
  position: relative;
}
</style>